<script setup>
import { onMounted, onUnmounted, ref } from "vue";

const videoElement = ref({});
const startCamera = () => {
  navigator.mediaDevices
    .getUserMedia({ video: true })
    .then((stream) => {
      videoElement.value.srcObject = stream;
    })
    .catch((error) => {
      console.error("Error accessing camera:", error);
    });
};

const takePhoto = () => {
  // 获得Canvas对象
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  canvas.width = videoElement.value.videoWidth;
  canvas.height = videoElement.value.videoHeight;
  ctx.drawImage(videoElement.value, 0, 0, canvas.width, canvas.height);
  // toDataURL --- 可传入'image/png'---默认, 'image/jpeg'
  let img = canvas.toDataURL();
  // console.log("img-----", img);

  //   this.$http({
  //     url: this.$http.adornUrl(`/face/face-login`),
  //     method: "post",
  //     data: this.$http.adornData(img, false, "json"),
  //   }).then((response) => {
  //     if (response.data.code != 0) {
  //       this.$message.error(response.data.message);
  //     } else {
  //       this.$message.success(response.data.message);
  //       this.$router.push({ path: "/school" });
  //       // 关闭摄像头
  //       let stream = videoElement.value.srcObject;
  //       let tracks = stream.getTracks();
  //       tracks.forEach((track) => track.stop());
  //     }
  //   });
};


const  stopCamera = () =>{
        let stream = videoElement.value?.srcObject;
        let tracks = stream?.getTracks();
        tracks?.forEach((track) => track.stop());
}

onMounted(() => {
  startCamera();

  setTimeout(() => {
    // takePhoto();

  }, 2000); // 2000毫秒后自动执行takePhoto方法
});


// 组件销毁  
onUnmounted(()=>{
    stopCamera()
})


// 导入切换人脸识别的状态组件 

import {useLoginStore, useCounterStore}  from '@/views/admin/store/login.js'
// import {useLoginStore}  from '@/store/modules/login.js'

const store =  useLoginStore()

</script>




<template>

  <div class="right-infp">
    <div class="right-infp-name">
      <div class="kuai">
        <video ref="videoElement" autoplay></video>
        <span class="o1"></span>
        <span class="o2"></span>
        <span class="o3"></span>
        <span class="o4"></span>
      </div>
    </div>

    <div class="right-infp-btn">
      <a @click="store.setformState"> 返回账号登录 </a>
      <a class="ml10" @click="store.setvoiceState"> 返回声纹登录 </a>
    </div>
  </div>

</template>
    

    

<style scoped >
.right-infp {
  width: 21.5rem;
  height: 18.5rem;
  margin: auto auto;
  /* border: 1px solid red;*/
  vertical-align: center;
  position: absolute;
  top: 7.2rem;
  left: 4rem;
}
.right-infp-name {
  width: 100%;
  height: 13.5rem;
  background-size: 100% 100%;
  line-height: 1.9rem;
  margin-bottom: 1.8rem;
  position: relative;
}

.kuai {
  width: 100%;
  height: 13.5rem;
}

.kuai video {
  width: 100%;
  height: 13.5rem;
}
.kuai span {
  width: 3.5rem;
  height: 2rem;
}
.kuai .o1 {
  position: absolute;
  border-top: 2px solid aqua;
  border-left: 2px solid aqua;
  left: 25px;
  top: -10px;
}
.kuai .o2 {
  position: absolute;
  border-top: 2px solid aqua;
  border-right: 2px solid aqua;
  right: 25px;
  top: -10px;
}
.kuai .o3 {
  position: absolute;
  border-bottom: 2px solid aqua;
  border-left: 2px solid aqua;
  bottom: -10px;
  left: 25px;
}
.kuai .o4 {
  position: absolute;
  border-bottom: 2px solid aqua;
  border-right: 2px solid aqua;
  bottom: -10px;
  right: 25px;
}
.right-infp-btn {
  width: 100%;
  height: 7.5rem;
  position: relative;
}
.right-infp-btn a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  border: 2px solid #79bbff;
  background: #79bbff;
  letter-spacing: 4px;
}

.right-infp-btn a:hover {
  background: #00eaff;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #00eaff, 0 0 25px #00eaff, 0 0 50px #00eaff,
    0 0 100px #00eaff;
}

.ml10 {
    margin-left: 10px;
}
</style>
